import control from './control';

class Clipper {
  constructor(cfg = {}) {
    if (!cfg.target) {
      throw('Need element!');
    }

    this.cfg = cfg;
    this.isDown = false;
    this.points = null;

    this.con = null;
    this.canvas = null;
  }

  clientSize = () => {
    this.client = this.cfg.target.getBoundingClientRect();
  }

  init = () => {
    if (this.con) {
      this.destroy();
      this.init();
      return
    }

    window.addEventListener('resize', this.clientSize, false);
    window.addEventListener('scroll', this.clientSize, false);
    this.clientSize();

    this._createImage(() => {
      this.canvas = document.createElement('canvas');

      this.con = document.createElement('div');
      this.con.className = 'clipper_content';

      control.bind(this)();
      this.cfg.target.appendChild(this.con);
    });
  }

  _createImage = (callback, error) => {
    const image = new Image();

    image.onload = () => {
      const { width: c_w, height: c_h } = this.client;
      const { width: i_w, height: i_h } = image;
      const r = i_w/i_h;
      let top = 0, left = 0, width = 0, height = 0, radio = 1;

      if (r > c_w/c_h) {
        width = c_w;
        height = c_w/r;
        top = (c_h - height)/2;
        left = 0;
      } else {
        height = c_h;
        width = c_h*r ;
        left = (c_w - width)/2;
        top = 0;
      }

      radio = i_h/height;

      this.image = image;
      this.imgCli = { top, left, width, height, radio };

      callback(image);
    };

    image.onerror = error || (() => {});

    image.crossOrigin = 'Anonymous';
    image.src = this.cfg.image;
  }

  /**
   * @returns base64 已裁切图片
   */
  createCanvas = () => {
    const { top, left, width, height } = this.points;

    const canvas = this.canvas;
    const imgCli = this.imgCli;
    const ctx = canvas.getContext('2d');

    const sx = (left - imgCli.left) * imgCli.radio >> 0;
    const sy = (top - imgCli.top) * imgCli.radio >> 0;
    const sw = width * imgCli.radio >> 0;
    const sh = height * imgCli.radio >> 0;

    canvas.width = ctx.width = sw;
    canvas.height = ctx.height = sh;

    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, sw, sh);

    // ctx.translate(0, (sh + height) / 2);
    // ctx.scale(1, -1);
    // ctx.translate((sw + width) / 2, 0);
    // ctx.scale(-1, 1);

    ctx.drawImage(this.image, sx, sy, sw, sh, 0, 0, sw, sh);
    // ctx.setTransform(1, 0, 0, 1, 0, 0);

    const data = canvas.toDataURL('image/jpeg');

    this.cfg.callBack && this.cfg.callBack(data);
    return data;
  }

  destroy = () => {
    window.removeEventListener('resize', this.clientSize, false);
    window.removeEventListener('scroll', this.clientSize, false);

    if (this.con) {
      this.cfg.target.removeChild(this.con);
      this.con = null;
      this.canvas = null;
    }
  }
}


if (ENV === 'development') {
  console.log(`%c[${ENV}]`, 'color: blue', 'started!')

  const cli = new Clipper({
    target: document.querySelector('.scene'),
    image: 'http://goss.cfp.cn/creative/vcg/nowater800/new/3b9d007c4c6945329654c9b97a1d00ef.jpg',
    openSize: .4,
    btns: [
      {
        name: '查询相似',
        click() {
          const src = this.createCanvas();

          const img = new Image();
          img.src = src;
          document.getElementById('imgbox').appendChild(img);
        }
      }
    ]
  });

  document.getElementById('open').addEventListener('click', () => {
    cli.init();
  })

  document.getElementById('close').addEventListener('click', () => {
    cli.destroy();
  })

  console.log(cli);
}
